
<template>
  <main-container headerText="消息管理 >> 消息列表">
    <div class="content" :key="showPageKey" >
    <top-option>
    <div slot="left-box">
      
    <input-search
      lableName="标题"
      inputValue="title"
      :tThis="this"
      inputPlaceholder="请输入标题"
    />
  
    <select-search
      lableName="状态"
      selectIdName="state"
      :tThis="this"
      selectPlaceholder="请选择状态"
      :selectOpts="stateOpts"
      selectWidth="150px;"
      labelWidth="80px;"
    />
    
    <select-search
      lableName="类型"
      selectIdName="type"
      :tThis="this"
      selectPlaceholder="请选择类型"
      :selectOpts="typeOpts"
      selectWidth="150px;"
      labelWidth="80px;"
    />
    
    </div>
    <div slot="right-box">
      <div class="sub">
        <el-button @click="handleSearch" class="orange">查询</el-button>
  <el-button @click="handleAdd" >新增</el-button>
  
      </div>
    </div>
  </top-option>
  
  <!-- 列表栏 -->
  <div class="list">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; border-radius: 4px;"
      class="tableBox"
      border
    >
      <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            {{ scope.row.index || '-'}}
          </template>
        </el-table-column>
        <el-table-column label="标题" width="undefined">
          <template slot-scope="scope">
            {{ scope.row.title || '-'}}
          </template>
        </el-table-column>
        
          <el-table-column label="视频地址" width="300" >
            <template slot-scope="scope"> <a target="_blank" :href="scope.row.videoUrl">{{scope.row.videoUrl || "-" }} </a></template>
          </el-table-column>
        
        <el-table-column label="类型" width="undefined" >
          <template slot-scope="scope">{{typeShow[scope.row.type + ''] || '-'}}</template>
        </el-table-column>
        
        <el-table-column label="阶段" width="undefined" >
          <template slot-scope="scope">{{stageShow[scope.row.stage + ''] || '-'}}</template>
        </el-table-column>
        
        <el-table-column label="状态" width="undefined" >
          <template slot-scope="scope">{{stateShow[scope.row.state + ''] || '-'}}</template>
        </el-table-column>
        
          <el-table-column label="封面图" width="undefined"  >
            <template slot-scope="scope">
              <div 
                class="table-img-wrap flex"
                v-if="scope.row.img" 
                style="height: 60px;">
                
            <el-image 
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
              > 
            </el-image>
               
              </div>
              <div v-else>未上传图片</div>
            </template>
          </el-table-column>
        <el-table-column label="创建时间" width="undefined">
          <template slot-scope="scope">
            {{ scope.row.gmtCreated || '-'}}
          </template>
        </el-table-column>
        
      
      <el-table-column label="操作" width="360">
        <template slot-scope="scope">
          
      <el-button @click="handleModify" type="primary" :data-id="scope.row.id" size="small">编辑</el-button>
      <el-button v-if="scope.row.state == '2'" @click="handleChangeStateOpen" type="primary" :data-id="scope.row.id" size="small">上架</el-button>
      <el-button v-if="scope.row.state == '1'" @click="handleChangeStateClose" type="primary" :data-id="scope.row.id" size="small">下架</el-button>
      <el-button @click="handleDelete" type="warning" :data-id="scope.row.id" size="small">删除</el-button> 
        </template>
      </el-table-column>
    
    </el-table>
  </div>

    <!-- 分页 -->
    <div class="paging">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPageIdx"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="onePageSize"
          layout="total, prev, pager, next, jumper"
          :total="pageCount"
        ></el-pagination>
      </div>

      <div class="confirm-btn">
        <el-button class="paging-btn" @click="handleEnter" size="small">确定</el-button>
      </div>
  </div>

    
   </div>
  </main-container>
</template>

  <script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from '@/components/main_container';
import top_option from "@/components/subCon/topOption";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
  },
  props: {},
  data() {
    return {
      //列表
      tableData: [],
      multipleSelection: [],
      showPageKey: 100,
      //分页
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1, //总条数
      onePageSize: 10, //每页的条数
      
      
    formData: {
  
            title: null, 
            state: null, 
            type: null, 
    },
  
            stateOpts: [
                  { value: "", label: "全部" },
                  { value: "1", label: "上架" },
                  { value: "2", label: "下架" },
                ],
                
            typeOpts: [
                    { value: "", label: "全部" },
                    { value: "1", label: "学院白问百答" },
                    { value: "2", label: "最新动态" },
                    { value: "3", label: "21天创富" },
                    { value: "4", label: "操作教程视频" },
                ],
                typeShow : {
            "1": "学院白问百答",
            "2": "最新动态",
            "3": "21天创富",
            "4": "操作视频教程",
          }, 
      stageShow : {
            "1": "1",
            "2": "2",
            "3": "3",
            "4": "4",
            "5": "5",
            "6": "6",
            "7": "7",
            "8": "8",
            "9": "9",
            "10": "10",
            "11": "11",
            "12": "12",
            "13": "13",
            "14": "14",
            "15": "15",
            "16": "16",
            "17": "17",
            "18": "18",
            "19": "19",
            "20": "20",
            "21": "21",
          }, 
      stateShow : {
            "1": "上架",
            "2": "下架",
          }, 
      
   
  
      allMethods: "",
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();
    //页面数据重置 1
    if (this.recoverSearchF) {
      this.recoverSearchF({ _this: this });
    }
    
    
    this.initRequest();
    
    
    this.getInitData();
  
    
  },
  methods: {
    
    //编辑
    handleModify (e) {
      this.allMethods.handleModify(e);
    },
  
    //上架
    handleChangeStateOpen (e) {
      this.allMethods.handleChangeStateOpen (e);
    },
  
    //下架
    handleChangeStateClose (e) {
      this.allMethods.handleChangeStateClose (e);
    },
  
    //删除
    handleDelete (e) {
      this.allMethods.handleDelete(e);
    },
  
    //查询
    handleSearch() {
      this.allMethods.handleSearch();
    },
  //新增
  handleAdd(e) {
    this.allMethods.handleAdd(e);
  },
  
    
   

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        
    //编辑
    handleModify (e) {
      var { id } = e.currentTarget.dataset;
      _this.$router.push({
        path: '/news_m_add_news',
        query: { id }
      });
    },
  
    //上架
    handleChangeStateOpen (e) {
      const { id } = e.currentTarget.dataset;
      var url = API.news_m.editState;
      var data = {id,  state: 1 };
      console.log("参数", data);
      _this.tools.comfirmF({
        _this: _this,
        content: "是否确认此操作？",
        success: () => {

          
          _this.tools.post(
            url,
            data,
            null,
          
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                _this.$message({
                  type: "success",
                  message: "操作成功",
                });
                _this.getInitData();
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );

        }
      });

    },
    
    //下架
    handleChangeStateClose (e) {
      const { id } = e.currentTarget.dataset;
      var url = API.news_m.editState;
      var data = {id,  state: 2 };
      console.log("参数", data);
      _this.tools.comfirmF({
        _this: _this,
        content: "是否确认此操作？",
        success: () => {

          
          _this.tools.post(
            url,
            data,
            null,
          
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                _this.$message({
                  type: "success",
                  message: "操作成功",
                });
                _this.getInitData();
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );

        }
      });

    },
    
  //删除
  handleDelete(e) {
    const { id } = e.currentTarget.dataset;
    var url = API.news_m.del;
    var data = { id };
    console.log("参数", data);
    _this.$confirm("是否确认删除？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
          
          jhTools.get(
            url,
            null,
            data,
          
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                _this.$message({
                  type: "success",
                  message: "操作成功",
                });
                _this.getInitData();
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );

      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });

  },
  
    //查询
    handleSearch() {
      var {
       
      title,
      state,
      type,
      } = _this.formData;
      //保存搜索条件
      _this.currentPageIdx = 1;
      //保存数据 2
      if (_this.saveSearchF) {
        _this.saveSearchF({ _this: _this });
      }
      _this.LingChuang_request.handleSearch({
       
      title,
      state,
      type,
        pageIndex: _this.currentPageIdx,
        pageSize: _this.onePageSize,
        
      });
    },
  //新增
    handleAdd (e) {
      _this.$router.push({
        path: '/news_m_add_news',
        query: {},
      })
  },
  
    
   
      };
    },
    
    //表格默认函数
    //初始化
    initRequest() {
      this.LingChuang_request = jhTools.LingChuang_request({
        this: this,
        pageUrl: API.news_m.page,
        searchUrl: API.news_m.page,
        searchData: {},
      });
      // console.log(this.LingChuang_request);
    },
    //加载数据
    getInitData: function () {
      var _this = this;
      this.LingChuang_request.getInitData(
        {
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
          
        },
        function (res) {
          //初始格式化数据
        }
      );
    },
    //格式化数据
    formatData() {
      this.LingChuang_request.formatData();
    },
    //格式化页面
    formatPaging(res) {
      this.LingChuang_request.formatPaging(res);
    },
    //页数跳转
    handleSizeChange(val) {
      this.LingChuang_request.handleSizeChange(val);
      //分页数据 3
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //页面点击跳转
    handleCurrentChange(val) {
      this.LingChuang_request.handleCurrentChange(val);
      //分页数据 4
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //enter跳转
    handleEnter() {
      this.LingChuang_request.getPagingData(
        this.currentPageIdx,
        this.onePageSize
      );
      //分页数据 5
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //分页数据
    getPagingData(pageIndex, pageSize) {
      this.LingChuang_request.handleEnter(pageIndex, pageSize);
    },
    //列表勾选1
    toggleSelection(rows) {
      this.LingChuang_request.toggleSelection(rows);
    },
    //列表勾选2
    handleSelectionChange(val) {
      this.LingChuang_request.handleSelectionChange(val);
    },
    //表格默认函数

    /* 图片预览 */
    previewImgF({ imgUrl }) {
      this.tools.touchGEvent({
        eName: "previewImg",
        imgUrl,
      });
    },

    /* 恢复搜索状态 6 */
    recoverSearchF({ _this }) {
      _this.tools.recoverSearchF({
        _this: this,
        subItemName: "/news_m_news_m_table",
      });
    },

    /* 保存搜索状态 7 */
    saveSearchF({ _this }) {
      _this.tools.saveSearchF({
        _this: this,
        subItemName: "/news_m_news_m_table",
      });
    },

  
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';



//隐藏样式类
.hidden {
  display: none !important;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
